<template>
  <div class="diet-info">
    <div ref="mescroll" class="mescroll">
      <!-- 饮食介绍 -->
    	<img class="info-img" v-if="column_show.image" :src="column_show.image">
    	<div class="info-p">{{column_show.introduce}}</div>  	
      <div class="nav">
      	<div class="flex-nav border">
      		<div class="nav-item" v-for="(item, index) in columns" :key="index" @click="clickRouter(item.checkIsThree, item.id)">
      			<img :src="item.img">
      			<p>{{item.title}}</p>
      		</div>
      	</div>
      </div>
      <!-- router({path: 'audioClassList', query: {cate_id: item.id, column_id: column_id}}) -->
      <div class="audio">
  	    <aplayer 
          @click.native = "play"
          v-if='isShow'
          :music="musics"
          mode = "sigle"
  			/>
      </div>
      <div class="tab">    		
  	    <tab
  	    	active-color = "#FF659B"
  	    	custom-bar-width = "2rem"
  	    	>
  	      <tab-item selected @on-item-click="onItemClick(1)">热门推荐</tab-item>
  	      <tab-item @on-item-click="onItemClick(2)">全部音频</tab-item>
  	    </tab>
  	    <div class="recommend">	    	
  	    	<div class="item-list" v-for="(item, index) in audio_list" :key="index" @click="audio_play(index)">
  	    		<span class="num">{{index+1}}</span>
  	    		<p class="title" :class="(index === re_audio_id) ? 'active' : ''">{{item.title}}</p>
            <span @click="aduio_click(item)" class="chakan">查看详情 &gt;</span>
  	    	</div>
  	    </div>
      </div>
    </div>
  </div>
</template>

<script>
import Aplayer from 'vue-aplayer'
import { Tab, TabItem } from 'vux'
import MeScroll from 'mescroll.js'
import 'mescroll.js/mescroll.min.css'
import { get_column_cate, get_column_show, get_freeAudioLists_column, add_play, baseUrl } from '@/api/api'
export default {
  components: {
  	Aplayer,
  	Tab, 
  	TabItem
  },
  data () {
    return {
    	baseUrl,	// 图片根目录路劲
      musics: {},
      isShow: false,
			tabIndex: 1,
			audio_list: [],	// 音频列表数组
			is_hot: 1,
			re_audio_id: 0,
			columns: [],	// 栏目数组
			column_id: 0,	
			column_show: {},	// 页面详情内容
      free_id: '',
    }
  },
  created () {
  	this.column_id = this.$route.query.column_id
  	this.get_column_cates()
  	this.get_column_shows()
  	// this.get_freeAudioLists_columns()
  },
  mounted () {
    this.mescroll = new MeScroll(this.$refs.mescroll, { 
      up: {
        callback: this.upCallback
      }
    })
  },
  methods: {
    aduio_click(item) {
      if(item.checkIsThree == 1){
        this.router({path: 'audioDetails', query:{id: item.id, is_three: true}})
      }else{
        this.router({path: 'audioDetails', query:{id: item.id, is_three: false}})
      }
    },
    clickRouter(status, itemId) {
      if(status == '1'){
        this.router({path: 'audioClassList', query: {cate_id: itemId, column_id: this.column_id}})
      }else{
        this.router({path: 'audioList', query: {cate_id: itemId, column_id: this.column_id}})
      }
    },
  	onItemClick (index) {
  		this.tabIndex = index
  		this.is_hot = (index === 1) ? 1 : 0
      this.audio_list = [];
      this.mescroll.resetUpScroll()
  	},
    router (path) {
      this.$router.push(path)
    },
    audio_play (index) {
      this.checkIsThree = (this.audio_list[index].checkIsThree == 1) ? 1 : 0;      
    	this.re_audio_id = index
      this.free_id = this.audio_list[index].id
  		this.musics = {
				title: this.audio_list[index].title,
				artist: ' ',
				src: this.audio_list[index].url,
			}
      this.isShow=true
    },
    // 获取页面详情
    get_column_shows () {
    	get_column_show(this.column_id).then((res) => {
    		this.column_show = res.data.info  
    	}).catch((err) => {
    		console.dir(err)
    	})
    },
    // 获取栏目
    get_column_cates () {
    	get_column_cate(this.column_id).then((res) => {
    		this.columns = res.data.info
    	}).catch((err) => {
    		console.dir(err)
    	})
    },
    upCallback (page) {      
      get_freeAudioLists_column(this.column_id, this.is_hot, page.num, 50).then((res) => {
        if(res.data.info == null)   {
          this.mescroll.endSuccess(0);
        }
        this.re_audio_id = 0
        this.checkIsThree = (res.data.info[0].checkIsThree == 1) ? 1 : 0;
        this.free_id = res.data.info[0].id
        this.musics = {
          title: res.data.info[0].title,
          artist: ' ',
          src: res.data.info[0].url,
        }
        this.isShow=true
        if (page.num == 1){
          this.audio_list = []
        }
        this.$nextTick(() => {
          this.mescroll.endSuccess(res.data.info.length);
        })
        this.audio_list = this.audio_list.concat(res.data.info)
      }).catch((err) => {
        console.dir(err)
        this.mescroll.endErr()
      })
    },
    play () {
      if(!sessionStorage.phone){
        this.$router.push({path: './bindPhone'})
        return
      }
      add_play(this.free_id, this.checkIsThree).then((res) => {
      }).catch((err) => {
        console.dir(err)
      })
    }
  }
}
</script>
<style lang="stylus" scoped>
  .diet-info
    background-color #f2f2f2
    min-width 100vw
    min-height 100vh
    .mescroll
      position fixed
      top 0
      bottom 0
      height auto
      background-color #f5f5f5
    .info-p
      line-height 2.4rem
      font-size 1.3rem
      color #999
      background-color #fff
      padding 1.5rem
      margin-bottom 1rem
    .nav
      background-color #fff
      margin-bottom 1rem
      .border
          border-bottom 1px solid #e6e6e6
      .flex-nav
        overflow hidden
        .nav-item
          text-align center
          color #666
          font-size 1.2rem
          float: left
          width 33.33%
          position relative
          padding 2rem 0
          img
            width 6rem
            height 6rem
            left 50%
            margin-left -3rem
            position relative
            overflow hidden
            border-radius 50%
          p
            background-color rgba(0,0,0,.15)
            position absolute
            width 6rem
            height 6rem
            line-height 6rem
            text-align center
            font-size 1.3rem
            color #fff
            font-weight 500
            top 2rem
            left 50%
            margin-left -3rem
            border-radius 50%
    .audio
      padding 2rem 1.5rem
      background-color #fff
      border-bottom 1px solid #e5e5e5
    .recommend
      padding 0 1.5rem
      background-color #fff        
      .item-list
        display flex
        padding-top 2rem
        &:last-child 
          p, .chakan
            border none
        .num
          font-size 1.6rem
          color #fff
          background-color #FF659B
          border-radius .4rem
          width 5.7rem
          height 2.7rem
          text-align center
          line-height 2.7rem
          max-width 5.7rem
          margin-right 2rem
        .title
          flex 1
          font-size 1.5rem
          font-weight bold
          line-height 2.7rem
          border-bottom 1px solid #e5e5e5
          padding-bottom 2rem
          text-overflow ellipsis
          white-space nowrap
          overflow hidden
        .active
          color #FF659B
        .chakan
          line-height 2.7rem
          border-bottom 1px solid #e5e5e5     
</style>